<template>
  <div 
    :class="$style.cornerstoneElement" 
    ref="viewer"
    @contextmenu.prevent="handleContextMenu"
    @mousedown="handleMouseDown"
    @mouseup="handleMouseUp"
    @mousemove="handleMouseMove"
    @mouseleave="handleMouseLeave"
    @wheel="handleMouseWheel">
    
    <!-- 四角信息显示 -->
    <div :class="$style.slotContainer">
      <slot name="cornerTL" class="corner-tl"></slot>
      <slot name="cornerTR" class="corner-tr"></slot>
      <slot name="cornerBL" class="corner-bl"></slot>
      <slot name="cornerBR" class="corner-br"></slot>
      
      <!-- 中央内容 -->
      <slot></slot>
    </div>
    
    <!-- 缩放和窗位窗宽信息 -->
    <div :class="$style.zoomInfo" v-if="showZoomInfo">
      缩放: {{ zoomLevel.toFixed(2) }}x
    </div>
    
    <div :class="$style.wwwcInfo" v-if="showWwwcInfo">
      WW: {{ windowWidth }} / WC: {{ windowCenter }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'CornerstoneViewer',
  props: {
    zoomLevel: {
      type: Number,
      default: 1.0
    },
    windowWidth: {
      type: Number,
      default: 400
    },
    windowCenter: {
      type: Number,
      default: 40
    },
    showZoomInfo: {
      type: Boolean,
      default: false
    },
    showWwwcInfo: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    // 确保传递的是真实DOM元素
    this.$emit('viewer-mounted', this.$refs.viewer);
  },
  methods: {
    handleContextMenu(e) {
      this.$emit('context-menu', e);
    },
    handleMouseDown(e) {
      this.$emit('mouse-down', e);
    },
    handleMouseUp(e) {
      this.$emit('mouse-up', e);
    },
    handleMouseMove(e) {
      this.$emit('mouse-move', e);
    },
    handleMouseLeave(e) {
      this.$emit('mouse-leave', e);
    },
    handleMouseWheel(e) {
      this.$emit('mouse-wheel', e);
    }
  }
}
</script>

<style module>
/* 导入变量 */
@import '../styles/variables.css';

/* 使用CSS Modules方式定义组件样式 */
.cornerstoneContainer {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cornerstoneElement {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  touch-action: none;
  user-select: none;
  background-color: var(--bg-dark);
}

/* 确保cornerstone的canvas元素完全填充 */
.cornerstoneElement > canvas {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  object-fit: contain !important;
}

/* 插槽位置样式 */
.slotContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10;
}

.slotContainer > * {
  pointer-events: auto;
}

.zoomInfo, .wwwcInfo {
  position: absolute;
  right: var(--spacing-md);
  background-color: var(--bg-overlay);
  color: var(--text-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  transition: opacity 0.3s ease;
  z-index: 20;
}

.zoomInfo {
  top: 70px;
}

.wwwcInfo {
  top: 110px;
}
</style>
